<template>
  <div class="register-container">
    <div class="register-box">
      <div class="box-header">
        <h3>轻聘网 - 招聘端注册</h3>
      </div>
      <el-form ref="registerForm" :model="registerForm" :rules="rules" label-width="150px">
        <el-form-item label="公司选择" prop="companyId">
          <el-select v-model="registerForm.companyId" filterable placeholder="请选择公司" style="width: 70%">
            <el-option
              v-for="item in companyOptions"
              :key="item.companyId"
              :label="item.companyName"
              :value="item.companyId"
            />
          </el-select>
          <router-link class="my-link" to="/register/company">公司未在轻聘网注册，点击注册-></router-link>
        </el-form-item>
        <el-form-item label="公司密令" prop="secret" style="width: 80%">
          <el-input v-model="registerForm.secret" placeholder="请输入公司密令" />
        </el-form-item>
        <el-form-item label="选择头像" prop="avatar" style="width: 80%">
          <upload-avatar ref="avatarComponent" />
        </el-form-item>
        <el-form-item label="用户名" prop="username" style="width: 80%">
          <el-input v-model="registerForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码" prop="password" style="width: 80%">
          <el-input v-model="registerForm.password" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword" style="width: 80%">
          <el-input v-model="registerForm.confirmPassword" type="password" placeholder="请再次输入密码" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerForm.email" placeholder="请输入邮箱" style="width: 73%" />
          <el-button size="mini" type="text" class="ml20" style="margin-left: 10px" @click="getCode">获取验证码</el-button>
        </el-form-item>
        <el-form-item label="验证码" prop="code" style="width: 80%">
          <el-input v-model="registerForm.code" placeholder="请输入验证码" />
        </el-form-item>
        <el-form-item>
          <el-button type="success" plain icon="el-icon-s-promotion" @click="register">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getCompanyOptions, employerRegister, getCode } from '@/api/register'
import UploadAvatar from '@/views/avatar/components/UploadAvatar'
export default {
  name: 'CompanyRegister',
  components: {
    'upload-avatar': UploadAvatar
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      registerForm: {
        companyId: undefined,
        secret: undefined,
        username: undefined,
        password: undefined,
        confirmPassword: undefined,
        avatar: undefined
      },
      companyOptions: undefined,
      rules: {
        secret: { required: true, message: '请输入密令', trigger: 'blur' },
        companyId: { required: true, message: '请选择公司', trigger: 'change' },
        username: { required: true, message: '请输入用户名', trigger: 'blur' },
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        code: { required: true, message: '请输入验证码', trigger: 'blur' }
      }
    }
  },
  mounted() {
    document.querySelector('body').setAttribute('style', 'background-color:#F2F5F4')
    this.getCompanyList()
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },
  methods: {
    // 加载公司列表
    getCompanyList() {
      getCompanyOptions().then(
        (response) => {
          this.companyOptions = response.data
        },
        (error) => {
          this.$message.error(error.message)
        }
      )
    },
    // 注册
    register() {
      // 先获取一下子组件的值
      this.$nextTick(() => {
        this.registerForm.avatar = this.$refs['avatarComponent'].avatar
      })
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          employerRegister(this.registerForm).then(
            (response) => {
              this.$alert('注册成功', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  // 跳转到登录页面
                  this.$router.push({ path: '/login' })
                }
              })
            },
            (error) => {
              this.$message.error(error.message)
            }
          )
        }
      })
    },
    getCode() {
      getCode({ email: this.registerForm.email }).then(
        (response) => {
          this.$message.success('验证码已发送到邮箱')
        },
        (error) => {
          this.$message.error(error.message)
        }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
  .register-container{
    margin-top: 200px;
  }
  .register-box {
    background: #ffffff;
    margin: 0 auto;
    width: 30%;
    padding-bottom: 20px;
  }
  .box-header {
    padding: 20px;
    text-align: center;
    color: #00b38a;
  }
  .avatar{
    width: 100px;
    height: 100px;
  }
  .my-link {
    display: inline-block;
    color: #20a0ff;
  }
</style>
